import { Form, Input, Button, notification } from 'antd';
import React from 'react';

import './index.scss';
import { login } from '@/config/request/opsManager';

const LoginPage: React.FC = () => {
    const [form] = Form.useForm();
    type NotificationType = 'success' | 'info' | 'warning' | 'error';

    const [api, contextHolder] = notification.useNotification({
        placement: 'top',
    });
    const openNotificationWithIcon = (
        type: NotificationType,
        title: string,
        description: string
    ) => {
        api[type]({
            message: title,
            description: description,
        });
    };

    const loginSubmit = async () => {
        const param = form.getFieldsValue();
        const response = await login(param);
        if (response.data.code === 200 || response.data.code === '0') {
            window.localStorage.setItem('token', response.data.data.token);
            window.localStorage.setItem('roles', response.data.data.roles);
            openNotificationWithIcon('success', '登录成功！', '');
            window.location.href = '/opsManager/home';
        } else {
            openNotificationWithIcon('error', response.data.msg, '');
        }
    };

    return (
        <div className="login">
            <div className="relative wBox" style={{ height: '100%' }}>
                <div
                    className="absolute"
                    style={{ bottom: '3.5%', left: 0, right: 0 }}
                >
                    <div className="size12 center" style={{ color: '#cccccc' }}>
                        <div>
                            <a
                                className="copyright"
                                href="http://www.beian.miit.gov.cn"
                                target="_blank"
                            />
                        </div>
                    </div>
                </div>

                <div
                    className="auto ohide"
                    style={{
                        height: '100%',
                        display: 'flex',
                        justifyContent: 'center',
                        alignItems: 'center',
                    }}
                >
                    <div className="login-content">
                        <img
                            alt="无图"
                            src="/login-window.png"
                            style={{
                                boxShadow: '0 0 30px 0 rgba(0, 0, 0, 0.1)',
                                borderRadius: '10px',
                                marginTop: '160px',
                            }}
                        />
                        <div className="platform-form">
                            <Form
                                name="login-form"
                                className="login-form"
                                layout="vertical"
                                form={form}
                            >
                                <Form.Item
                                    name="username"
                                    rules={[
                                        {
                                            required: true,
                                            message: '请输入登录账号',
                                        },
                                    ]}
                                >
                                    <Input
                                        style={{
                                            border: '0px',
                                            outline: 'none',
                                        }}
                                        placeholder="请输入账号"
                                    />
                                </Form.Item>
                                <Form.Item
                                    name="password"
                                    rules={[
                                        {
                                            required: true,
                                            message: '请输入登录密码',
                                        },
                                    ]}
                                >
                                    <Input
                                        style={{
                                            border: '0px',
                                            outline: 'none',
                                        }}
                                        type="password"
                                        placeholder="请输入密码"
                                    />
                                </Form.Item>
                                <Form.Item>
                                    <Button
                                        type="primary"
                                        htmlType="submit"
                                        className="login-btn"
                                        onClick={loginSubmit}
                                    >
                                        登录
                                    </Button>
                                </Form.Item>
                            </Form>
                        </div>
                    </div>
                </div>
            </div>
            {contextHolder}
        </div>
    );
};

export default LoginPage;
